<template>
    <div class="leftOne">
        <ThemeTitle :title="title"/>
        <div class="landArea">
            <div class="landIcon">
                <img src="/data/images/hngk/ceng.png" alt="">
            </div>
            <div class="landDetail">
                <div class="title">数据接入总量</div>
                <div class="num">
                    <div>
                        <span>65770</span>
                        <span>条</span>
                    </div>
                    <div>
                        <span>5.8</span>
                        <span>T</span>
                    </div>
                </div>
            </div>
        </div> 
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">数据分类统计</div>
            </div>
        </div> 
        <div class="twoCharts">
            <div id="activeChart"></div>
            <div id="videoChart"></div>
        </div> 
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">数据接入单位</div>
            </div>
        </div>  
        <div id="descChart">

        </div>
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">数据利用情况</div>
            </div>
        </div>  
        <div class="useState">
            <div class="inApp">
                <div>内部业务应用</div>
                <div>13340条</div>
            </div>
            <div class="rightArrow">
                <div></div>
                <div></div>
            </div>
            <div class="countryAndCity">
                <div>
                    <div>推送国家部委</div>
                    <div>5549条</div>
                </div>
                <div>
                    <div>市县系统应用</div>
                    <div>3120条</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import ThemeTitle from "../../common/ThemeTitle"
    import {
        defineComponent,
        getCurrentInstance,
        onMounted,
        ref,
        provide 
    } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        components: {
            ThemeTitle
        },
        setup(){
            const title = provide("title","数据总览");
            const {ctx} = getCurrentInstance();
            function drawActiveChart(){
                var dom = document.getElementById("activeChart");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                        animation: true,
                        title: {
                            text: "火点类型",
                            // "subtext": "火点类型",
                            x: "31%",
                            y: "center",
                            textStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center",
                                width: "200px"
                            },
                            subtextStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center"
                            }
                        },
                        legend: {
                            width: "30%",
                            left: "right",
                            textStyle: {
                                color: "#fff",
                                fontSize: 12
                            },
                            icon: "circle",
                            right: "0",
                            bottom: "0",
                            padding: [10, 30],
                            itemGap: 20,
                            data: ["静态", "动态"]
                        },
                        series: [{
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["65%", "90%"],
                            color: ["#F76F01", "#00FFFF"],
                            startAngle: 135,
                            labelLine: {
                                normal: {
                                    length: 25
                                }
                            },
                            label: {
                                normal: {
                                    formatter: "{b|{b}:}\n{hr|}\n {per|{d}%} ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 20,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#b3e5ff",
                                            fontSize: 14,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 14,
                                            padding: [5, 8],
                                            borderRadius: 2
                                        }
                                    },
                                    textStyle: {
                                        color: "#fff",
                                        fontSize: 14
                                    }
                                }
                            },
                            emphasis: {
                                show:false,
                                position:[30,50],
                                label: {
                                    show: true,
                                    formatter: "{b|{b}:}  {per|{d}%}  ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 22,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#fff",
                                            fontSize: 18,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 25,
                                            padding: [5, 6],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: [{
                                name: "动态",
                                value: 55
                            }, {
                                name: "静态",
                                value: 30
                            }
                            
                            ]
                        }, {
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["55%", "57%"],
                            label: {
                                show: false
                            },
                            data: [{
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: "linear",
                                            global: false,
                                            // colorStops: [{
                                            //     offset: 0,
                                            //     color: "#9F17FF"
                                            // }, {
                                            //     offset: 0.2,
                                            //     color: "#01A4F7"
                                            // }, {
                                            //     offset: 0.5,
                                            //     color: "#FE2C8A"
                                            // }, {
                                            //     offset: 0.8,
                                            //     color: "#FEE449"
                                            // }, {
                                            //     offset: 1,
                                            //     color: "#00FFA8"
                                            // }],
                                            colorStops: [{
                                                offset: 0,
                                                color: "#fff"
                                            }, {
                                                offset: 0.2,
                                                color: "#fff"
                                            }, {
                                                offset: 0.5,
                                                color: "#fff"
                                            }, {
                                                offset: 0.8,
                                                color: "#fff"
                                            }, {
                                                offset: 1,
                                                color: "#fff"
                                            }]
                                        }
                                    }
                                }
                            }]
                        }]
                    }
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawVideoChart(){
                var dom = document.getElementById("videoChart");
                var myChart = ctx.$echarts.init(dom);
                let option = {
                        animation: true,
                        title: {
                            text: "火点类型",
                            // "subtext": "火点类型",
                            x: "31%",
                            y: "center",
                            textStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center",
                                width: "200px"
                            },
                            subtextStyle: {
                                color: "#fff",
                                fontSize: 18,
                                fontWeight: "normal",
                                align: "center"
                            }
                        },
                        legend: {
                            width: "30%",
                            left: "right",
                            textStyle: {
                                color: "#fff",
                                fontSize: 12
                            },
                            icon: "circle",
                            right: "0",
                            bottom: "0",
                            padding: [10, 30],
                            itemGap: 20,
                            data: ["视频", "非视频"]
                        },
                        series: [{
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["65%", "90%"],
                            color: ["#F76F01", "#00FFFF"],
                            startAngle: 135,
                            labelLine: {
                                normal: {
                                    length: 25
                                }
                            },
                            label: {
                                normal: {
                                    formatter: "{b|{b}:}\n{hr|}\n {per|{d}%} ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 20,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#b3e5ff",
                                            fontSize: 14,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 14,
                                            padding: [5, 8],
                                            borderRadius: 2
                                        }
                                    },
                                    textStyle: {
                                        color: "#fff",
                                        fontSize: 14
                                    }
                                }
                            },
                            emphasis: {
                                show:false,
                                position:[30,50],
                                label: {
                                    show: true,
                                    formatter: "{b|{b}:}  {per|{d}%}  ",
                                    backgroundColor: "rgba(255, 147, 38, 0)",
                                    borderColor: "transparent",
                                    borderRadius: 4,
                                    rich: {
                                        a: {
                                            color: "#999",
                                            lineHeight: 22,
                                            align: "center"
                                        },
                                        hr: {
                                            borderColor: "#aaa",
                                            width: "100%",
                                            borderWidth: 1,
                                            height: 0
                                        },
                                        b: {
                                            color: "#fff",
                                            fontSize: 18,
                                            lineHeight: 33
                                        },
                                        c: {
                                            fontSize: 14,
                                            color: "#eee"
                                        },
                                        per: {
                                            color: "#FDF44E",
                                            fontSize: 25,
                                            padding: [5, 6],
                                            borderRadius: 2
                                        }
                                    }
                                }
                            },
                            data: [{
                                name: "视频",
                                value: 55
                            }, {
                                name: "非视频",
                                value: 30
                            }
                            
                            ]
                        }, {
                            type: "pie",
                            center: ["40%", "50%"],
                            radius: ["55%", "57%"],
                            label: {
                                show: false
                            },
                            data: [{
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: "linear",
                                            global: false,
                                            // colorStops: [{
                                            //     offset: 0,
                                            //     color: "#9F17FF"
                                            // }, {
                                            //     offset: 0.2,
                                            //     color: "#01A4F7"
                                            // }, {
                                            //     offset: 0.5,
                                            //     color: "#FE2C8A"
                                            // }, {
                                            //     offset: 0.8,
                                            //     color: "#FEE449"
                                            // }, {
                                            //     offset: 1,
                                            //     color: "#00FFA8"
                                            // }],
                                            colorStops: [{
                                                offset: 0,
                                                color: "#fff"
                                            }, {
                                                offset: 0.2,
                                                color: "#fff"
                                            }, {
                                                offset: 0.5,
                                                color: "#fff"
                                            }, {
                                                offset: 0.8,
                                                color: "#fff"
                                            }, {
                                                offset: 1,
                                                color: "#fff"
                                            }]
                                        }
                                    }
                                }
                            }]
                        }]
                    }
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            function drawBar(){
                var dom = document.getElementById("descChart");
                var myChart = ctx.$echarts.init(dom);
                var option = {
                        
                        grid: [
                            {
                                //左侧的柱状图grid
                                width: "90%",
                                left: '1%',
                                top: '0',
                                right: '0',
                                bottom: '0'
                            },
                        
                        ],
                        xAxis: [
                            {
                                //左侧柱状图的X轴
                                gridIndex: 0,//x 轴所在的 grid 的索引
                                show: false
                            },
                            {
                                //右侧柱状图的X轴
                                gridIndex: 1,//x 轴所在的 grid 的索引
                                show: false
                            }],
                        yAxis: [
                            {
                                //左侧柱状图的Y轴
                                gridIndex: 0,//y轴所在的 grid 的索引
                                splitLine: 'none',
                                axisTick: 'none',
                                axisLine: 'none',
                                axisLabel: {
                                    verticalAlign: 'bottom',
                                    align: 'left',
                                    padding: [0, 0, 15, 15],
                                    textStyle: {
                                        color: '#befbff',
                                        fontSize: '16',
                                    }
                                },
                                data: ['制造业','建筑业','交通运输','公共管理'],
                                inverse: true,
                            },
                            {
                                //左侧柱状图的Y轴
                                gridIndex: 0,//y轴所在的 grid 的索引
                                splitLine: 'none',
                                axisTick: 'none',
                                axisLine: 'none',
                                data: [555,444,333,222],
                                inverse: true,
                                axisLabel: {
                                    show: true,
                                    verticalAlign: 'bottom',
                                    align: 'right',
                                    padding: [0, 20, 15, 0],
                                    textStyle: {
                                        color: '#fff',
                                        fontSize: '16',
                                    },
                                    formatter: function (value) {
                                        return '{x|' + value + '}  {y|' + "元}"
                                    },
                                    rich: {
                                        y: {
                                            color: '#befbff',
                                            fontSize: 16
                                        },
                                        x: {
                                            color: '#f6cf42',
                                            fontSize: 16
                                        }
                                    }
                                }
                            },
                            {
                                //左侧柱状图的Y轴
                                gridIndex: 0,//y轴所在的 grid 的索引
                                splitLine: 'none',
                                axisTick: 'none',
                                axisLine: 'none',
                                data: []
                            }

                        
                        
                        ],
                        series: [
                            {
                                name: '值',
                                type: 'bar',
                                xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                                yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                                data: [555,444,333,222],
                                barWidth: 15,
                                itemStyle: {
                                    normal: {
                                        color: ctx.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: "#49bdff" // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: "#54ffd5" // 100% 处的颜色
                                        }], false),
                                        borderRadius: 6,
                                    }
                                },
                                z: 2
                            },
                            {
                                name: '外框',
                                type: 'bar',
                                xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                                yAxisIndex: 2,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                                barGap: '-100%',
                                data: [1000, 1000, 1000, 1000],
                                barWidth: 15,
                                itemStyle: {
                                    normal: {
                                        color: '#2d5271',
                                        borderRadius: 6,
                                    }
                                },
                                z: 0
                            }
                            
                        ]
                    };
                myChart.setOption(option);
                window.addEventListener("resize", () => { myChart.resize();});
            }
            
            onMounted(()=>{
                drawActiveChart()
                drawVideoChart()
                drawBar()
            })
            return {
               title
            }
        }
    }
</script>

<style lang="stylus" scoped>
  @import '../../../assets/varibles.styl'
  .leftOne
    .landArea
        width:vw(365)
        height:vh(132)
        margin-top:vh(25)
        background: url('/data/images/hngk/bigrec.png') no-repeat
        background-size: 100% 100%
        padding:vh(25) vw(37) vh(28) vw(33)
        display:flex
        align-items :center
        .landIcon
            margin-right:vw(30)
        .landDetail
            width:vw(220)
            .title
                font-size:vw(18)
                cursor: pointer
            .num
                display:flex
                margin-top:vh(17)
                div:first-child
                    span:first-child
                        color:rgba(233,209,74,1)
                        font-size:vw(30)
                div:last-child
                    font-size:vw(16)
                    background: none
                    flex-shrink: 0
                    width:vw(18)
                    margin-left:vw(50)
                    span:first-child
                        color:rgba(233,209,74,1)
                        font-size:vw(30)
    .twoCharts
        height:vh(110)
        width:100%
        margin-top:vh(20)
        display:flex
        justify-content :space-around
        #activeChart
            flex:1
        #videoChart 
            flex:1
    #descChart
        width:100%
        height:vh(364)
    .useState
        width:100%
        height:vh(140)
        display:flex
        justify-content:space-around
        align-items:center
        .inApp
            flex-shrink:0
            width:vw(132)
            height:vh(89)
            line-height:vh(45)
            text-align:center
            background:url('/data/images/sjhj/leftRec.png') no-repeat
            background-size:100% 100%
            display:flex
            flex-direction:column 
            justify-content:space-between
            div:nth-child(1)
                font-size:vw(16)
                color:rgba(80,255,255,1)
            div:nth-child(2)
                font-size:vw(14)
                color:#fff
        .rightArrow
            flex-shrink:0
            width:vw(51)
            height:vh(82)
            display:flex
            flex-direction:column 
            justify-content:space-between
            div:nth-child(1)
                width:vw(51)
                height:vh(19)
                background:url('/data/images/sjhj/upArrow.png') no-repeat
                background-size:100% 100%
            div:nth-child(2)
                width:vw(51)
                height:vh(19)
                background:url('/data/images/sjhj/downArrow.png') no-repeat
                background-size:100% 100%
        .countryAndCity
            flex-shrink:0
            width:vw(119)
            height:100%
            display:flex
            flex-direction:column 
            justify-content:space-between
            div:nth-child(1)
                width:vw(118)
                height:vh(58)
                background:url('/data/images/sjhj/rightRec.png') no-repeat
                background-size:100% 100%
                display:flex
                flex-direction:column 
                justify-content:space-between
                line-height:vh(29)
                text-align:center
                div:nth-child(1)
                    font-size:vw(16)
                    color:rgba(80,255,255,1)
                div:nth-child(2)
                    font-size:vw(14)
                    color:#fff
            div:nth-child(2)
                width:vw(118)
                height:vh(58)
                background:url('/data/images/sjhj/rightRec.png') no-repeat
                background-size:100% 100%
                display:flex
                flex-direction:column 
                justify-content:space-between
                line-height:vh(29)
                text-align:center
                div:nth-child(1)
                    font-size:vw(16)
                    color:rgba(255,184,60,1)
                div:nth-child(2)
                    font-size:vw(14)
                    color:#fff
    .geoIntro
        width:vw(365)
        margin-top:vh(18)
        .geoIntroTitle
            margin-bottom:vh(13)
            display:flex
            .sideLine
                width:vw(2)
                height:vh(15)
                margin-right:vw(10)
                background: #86ceeb
            .geoIntroWord
                color:#00EAFF
                font-size:vw(16)
        .geoCarousel
            width: vw(365)
            height: vh(172)
            border: 1px solid #0c4259;
            padding-top:vh(8)
            padding-left:vw(8)
            .carouseContent
                display:flex
                .carouseImg 
                    flex-shrink:0 
                    width:vw(163)
                    height:vh(135)  
                    margin-right:vw(12)  
                    border:1px solid #ddd
                .carouseWord
                    flex-shrink:0 
                    width:vw(168)
                    height:vh(139)  
                    padding:vh(12) vw(0)
                    line-height:vh(17)
</style>